<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>


    <title>注册页面</title>
    <link type="text/css" rel="stylesheet" href="style.css"/>

</head>
<body>
<div class="xm-logo">
    <i>
        <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect width="48" height="48" rx="3" ry="3" style="fill:#551fff"></rect>
            <rect x="10" y="15" width="4.2" height="18" style="fill:#FFFFFF"></rect>
            <rect x="33.75" y="15" width="4.2" height="18" style="fill:#FFFFFF"></rect>
            <rect x="11.25" y="15" width="15" height="4.1" style="fill:#FFFFFF"></rect>
            <rect x="26.2" y="20.55" width="4.2" height="12.5" style="fill:#FFFFFF"></rect>
            <rect x="20.6" y="15" width="9.8" height="9.8" rx="4.4" ry="4.4" style="fill:#FFFFFF"></rect>
            <rect x="20.2" y="19" width="6" height="6" rx="2" ry="2" style="fill:#551fff"></rect>
            <rect x="18" y="19.1" width="4" height="2.2" style="fill:#551fff"></rect>
            <rect x="24.2" y="23" width="1.94" height="10" style="fill:#551fff"></rect>
            <rect x="18.1" y="22.8" width="4.2" height="10.2" style="fill:#FFFFFF"></rect>
        </svg>
    </i>
</div>
<h1 class="xm-title">请填写验证码</h1>
<ul class="xm-login">
    <li>
        <input class="xm-input" id="phone" name="phone" readonly type="text" placeholder="请输入手机号码" value=""/>
    </li>

    <li>
        <input class="xm-input"  id="password" type="password" placeholder="请输入密码"/>
    </li>
    <li>
        <input class="xm-input" id="code" type="text" placeholder="请输入验证码"/>
    </li>
    <li>
        <button id="reg" class="xm-button">注册</button>
    </li>
</ul>

<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
    $(function () {

        //进入页面，将上一页的手机号码填入到文本框
        var u = localStorage.phone;
        $("#phone").val(u);

        //发送注册的网络请求
        $("#reg").on("click",function () {
            //获取账户  从文本框
            var phone = $("#phone").val();
            //获取密码  从密码输入框
            var pass = $("#password").val();
            //获取验证码 从验证码输入框
            var code = $("#code").val();

            $.ajax({
                url:"https://test.shop.deepe.ren/api/register",
                data:{
                    account:phone,
                    password:pass,
                    captcha:code
                },
                type:"POST",
                dataType:"json",
                success:function (res) {
                    console.log(res);
                    if(res.status == 200){
                        alert("注册成功~~~");
                    }else if(res.status == 400){
                        alert(res.msg);
                    }
                },
                error:function (err) {
                    console.log("请求失败");
                    console.log(err);
                }

            })
        })
    });

</script>

</body>
</html>
